<template>
	<view class="container" :style="viewColor">
		<view class="head-wrapper" :style="'top:'+statusBarHeight">
			<view class="head-menu">
				<view class='iconfont icon-xiangzuo' @click="returns"></view>
				<view class="iconfont icon-shouye4" @click="goHome"></view>
			</view>
			<view class="head-title">个人主页</view>
		</view>
		<view class="header"  :style="{ 'background-image': userInfo.user_top_back ? `url(${userInfo.user_top_back})` : `url(https://img.jukee.net/def/ed23d202403122235403280.jpg)`, 'padding-top': '200rpx'}">
			<view class="user_wrapper acea-row">
				<button open-type="share" style="display: flex;border-radius: 50%;"><image :src="userInfo.avatar || '/static/images/f.png'" class="picture"></image></button>
				<view class="user_text">
					<view class="name acea-row">
						<text>{{userInfo.nickname || ''}}</text>
						<image v-if="userInfo.member_icon" class="level_icon" :src="userInfo.member_icon" alt="">
					</view>
					<view class="user_id">ID: {{userInfo.uid || ''}}</view>
					<!-- <view class="user_id">
						<view class="user_fensi_icon"><image :src="domain + '/uploads/def/20230718/cb9456dc52abfc4b76354198eb03f6dd.png'" /></view>
						<view class="user_fensi">{{userInfo.fensi || 0}}粉丝</view>
						<view class="user_label">{{userInfo.label.label_name}}</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="plant_info acea-row">
			<view class="count_wrapper acea-row">
				<!-- <view class="item" @click="getUserContactInformations({}, 'we_chat_account')">
					<image :src="domain + '/uploads/default/20230715/cd32e4cc83f89f460248767571686772.png'" />
				</view>
				<view class="item" @click="getUserContactInformations({}, 'phone')">
					<image :src="domain + '/uploads/default/20230715/4cebded7d17ad4a92b94c88c14274be5.png'" />
				</view>
				<button class="item" open-type="share" @click="getUserContactInformations({is_user: 1}, 'share')">
					<image :src="domain + '/uploads/default/20230715/92df7fff7fe12a54ac593186c3d2060f.png'" />
				</button>
				<view class="item" @click="getUserContactInformations({}, 'report')">
					<image :src="domain + '/uploads/default/20230715/36150ec648a4a7e06a60e30c0f771b9a.png'" />
				</view> -->
				<view class="item" @click="getUserContactInformations({}, 'we_chat_account')">
					<image src="https://img.jukee.net/def/78281202406092329129210.png" />
				</view>
				<view class="item" @click="getUserContactInformations({}, 'phone')">
					<image src="https://img.jukee.net/def/38c0f202406092329119254.png" />
				</view>
				<view class="item" @click="getUserContactInformations({}, 'message')">
					<image src="https://img.jukee.net/def/31925202406092329133825.png" />
				</view>
				<button class="item" open-type="share" @click="getUserContactInformations({is_user: 1}, 'share')">
					<image src="https://img.jukee.net/def/6018d202406092329121520.png" />
				</button>
			</view>
			<view class="business" v-if="!is_my && userInfo.business">{{userInfo.business}}</view>
			<view class="intended-customers" v-if="is_my">
				<view class="intended-customers-title">意向客户</view>
				<view class="intended-customers-user">
					<view class="intended-customers-avatar" v-if="userInfo.focus">
						<image v-for="(item, index) in userInfo.intended_customers_user" :key="index" :src=" item.focus.avatar" />
					</view>
					<view class="intended-customers-more">
						<image :src=" domain + '/uploads/default/20230716/3023bb089153a19402e65cb26e66e708.png'" />
					</view>
				</view>
			</view>
			<view class="user-address" v-else>
				<view class="user-address-detail" @click="showMaoLocation">
					<image :src=" domain + '/uploads/def/20230716/d975e0044517f8b55be61008a6377532.png'"/>
					{{userInfo.province || ''}}{{userInfo.city || ''}}{{userInfo.district || ''}}{{userInfo.address || ''}}
				</view>
				<view class="user-address-btn" @click="showMaoLocation" v-if="userInfo.onsite_svc == 1">
					上门服务
				</view>
			</view>
		</view>
		<view class="tabNav">
			<div class="tabNav-item" v-for="(item, index) in searchList" :key="index" @click="searchContent(item.type, index)" v-if="index != 4 || is_community_video_start == 1">
				<div class="tabNav-item-name" :class="searchType == item.type ? 'on' : ''">{{item.name}}</div>
			</div>
		</view>
		<view class="search-list-content">
			<view class="common-content-margin" v-if="is_my">
				<view class="common-head">
					<view class="common-title"><view class="common-title-name">{{searchList[index].name}}广场</view></view>
					<!-- <view class="common-head-more" @click="goUrl('/pages/extends/community/community_demand')"><image :src="domain + '/uploads/def/20230702/97c18c51de8da55ee03c7f5b0d3c03f8.png'" /></view> -->
				</view>
				<demand :list="recommendDemandData.list"></demand>
			</view>
			<template v-if="searchType != 1 && (searchType != 3 || (searchType == 3 && !demand_data.community_id))">
				<view class="search-list-data" v-if="list.length">
					<!-- <service :list="list" v-if="searchType == 1 && is_my" :type="2"></service> -->
					<circleItem :list="list" v-if="searchType == 5"></circleItem>
					<videoList :list="list" v-if="searchType == 2"></videoList>
					<userProduct :list="list" v-if="searchType == 6"></userProduct>
					<demand :list="list" v-if="searchType == 3"></demand>
				</view>
				<emptyPage v-else title="正在加载中···"></emptyPage>
			</template>
			<view class="demand_detail searchType3Detail" v-else-if="searchType == 3 && demand_data && demand_data.community_id">
				<view class="demand_info">
					<!-- <view class="demand_content" :style="{'height': content_height}"> -->
					<view class="demand_content" :style="{'height': 'auto'}">
						<text class="demand_label">{{demand_data.type_name}}</text>{{demand_data.content}}
					</view>
          <view class="circle_demand_title_time ">{{demand_data.create_time}}</view>
					<view class="demand_pics" v-if="demand_data.image && demand_data.image.length">
						<image v-for="(item, index) in demand_data.image" :key="index" :src="item" mode="widthFix" @click="clickImg(index)"/>
					</view>
					<view class="demand_price" v-if="demand_data.is_buy == 1">
						<view class="demand_p"><text class="demand_p">¥</text>{{demand_data.price || 0}}</view>
						<view class="report" style="margin-left: auto;"><image :src="domain + '/uploads/def/20230703/8a86ee47e8ca30aa63ce6ad95c1bc151.png'" @click="getUserContactInformations({}, 'we_chat_account')" /></view>
						<view class="report" style="margin-left: 50rpx;"><image :src="domain + '/uploads/def/20230703/54b09da7a3583769bae9b03a9d626fa7.png'" mode="widthFix" @click="getUserContactInformations({}, 'phone')" /></view>
						<view class="demnad_more" @click="couponTap2(demand_data)" style="margin-left: 50rpx;">咨询</view>
					</view>
					<view class="demand_price" v-else>
						<view class="demnad_more" @click="demand_share_popup = 1">分享赚</view>
            <view  class="circle_demand_hist"><image :src="domain + '/uploads/def/20230716/4f93935afc8d5e867ebff76b56dfab3c.png'" mode="widthFix"/>{{demand_data.hits}}</view>
            <view class="circle_demand_service_t"  @click="getUserContactInformations({}, 'phone')" >
              <image :src="domain + '/uploads/default/20230704/6067cedf7e4d911be164f789cca30df4.png'" mode="widthFix"/>
					  </view>

            <view class="circle_demand_service_t"  @click="getUserContactInformations({}, 'we_chat_account')">
              <image :src="domain + '/uploads/default/20230704/c4fa17042a83ac0489d48344ccf6eb6e.png'" mode="widthFix"/>
            </view>
						<!-- 
              <view class="demand_p"><text class="demand_p">预算</text>{{demand_data.price || 0}}</view>
              <view class="demand_p" v-if="demand_data.max_price"> - <text class="demand_p">¥</text>{{demand_data.max_price}}</view>
              <view class="demand_tips">预算计划</view> 
              <view class="demnad_more" @click="getUserContactInformations({community_id: demand_data.community_id}, 'demand')">查看完整</view>
              <view class="report"><image src="https://img.jukee.net/default/87a30202309130033023461.png" mode="widthFix" @click="goUrl('/pages/extends/user_report/index?type=1&link_id='+demand_id)" /></view>
            -->
					</view>
				</view>
				<!-- <view class="demand_c_title">需求详情</view>
				<view class="demand_c">{{demand_data.content}}</view> -->
				<view class="demand_c_title">相近需求</view>
				<view class="search-list-data" v-if="recommendList.length">
					<demand :list="recommendList"></demand>
				</view>
				<emptyPage v-else title="暂无相近需求"></emptyPage>
				<!-- <view class="demand_avatar">
					<view class="demand_a">
						<image src="" />
					</view>
					<view class="demand_discuss">2895人在讨论</view>
				</view> -->
			</view>
			<view class="community_content" v-else-if="searchType == 1 && service_data && service_data.community_id">
				<view class="community_head">
					<view class="community_price font-size36-bold">
						<text>¥</text>{{service_data.price || 0}}
					</view>
					<view class="community_hits">{{service_data.hits}}人想要</view>
				</view>
				<view class="community_data">
					{{service_data.content}}
					<view class="community_video" :style="{background: 'url('+service_data.image[0]+') center center / 100% auto no-repeat'}" v-if="service_data.service_type == 1" @click="clickVideo(service_data.video_link)">
						<image class="community_video_play" :src="domain + '/uploads/def/20230702/81e09dc636713665018806f309d37481.png'" />
					</view>
					<view class="community_pics" v-else-if="!service_data.service_type && service_data.image.length > 0">
						<image v-for="(p,i) in service_data.image" :key="i" :src="p" mode="widthFix" />
					</view>
				</view>
			</view>
			<template v-else>
				<view class="recommend-title">公司简介</view>
				<view class="servie-introduce">
					{{userInfo.company_profile || '暂无介绍'}}
				</view>
				<view class="recommend-title">服务项目</view>
				<view class="servie-introduce">
					{{userInfo.service || '暂无服务项目'}}
				</view>
				<view class="recommend-title">他的行业</view>
				<view class="servie-label">
					{{userInfo.label.label_name || '暂无选择行业'}}
				</view>
			</template>
		</view>
		<view class="bottom_jiedan" v-if="searchType == 1 && service_data && service_data.community_id">
			<button open-type="share" @click="getUserContactInformations({is_user: 1}, 'share')" class="bottom_jiedan_check">
				<view class="bottom_jiedan_icon"><image src="https://img.jukee.net/def/27646202310271514047304.png"  mode="widthFix"/></view>
				<view class="bottom_jiedan_name">{{service_data.count_reply}}</view>
			</button>
			<view class="bottom_jiedan_check" @click="likeToggle(service_data.relevance_id, 1)">
				<view class="bottom_jiedan_icon">
					<image :src="domain + '/uploads/def/20230718/f847a2525c37fdb51365fd6b6aaac131.png'" v-if="!service_data.relevance_id" />
					<image src="https://img.jukee.net/def/8dd00202310271628179723.png" v-else/>
				</view>
				<view class="bottom_jiedan_name">{{service_data.relevance_count || 0}}</view>
			</view>
			<view class="bottom_jiedan_button acea-center" @click="buyServiceUrl">
				<view class="bottom_jiedan_icon">
					<image src="https://img.jukee.net/def/2a98f202310271633256173.png" />
				</view>
				<view class="bottom_jiedan_wz">我想要</view>
			</view>
		</view>
		<!-- <view class="bottom_jiedan" v-if="searchType == 1 && service_data && service_data.community_id">
			<button open-type="share" @click="getUserContactInformations({}, 'share')" class="bottom_jiedan_check">
				<view class="bottom_jiedan_icon"><image :src="domain + '/uploads/def/20230719/0a02672cc44cebb5bfd13e9a1b3fe0f3.png'"  mode="widthFix"/></view>
				<view class="bottom_jiedan_name">分享</view>
			</button>
			<view class="bottom_jiedan_check" @click="likeToggle(service_data.relevance_id)">
				<view class="bottom_jiedan_icon"><image :src="domain + '/uploads/def/20230718/f847a2525c37fdb51365fd6b6aaac131.png'"  mode="widthFix"/></view>
				<view class="bottom_jiedan_name">{{demand_data.relevance_id ? '已收藏' : '收藏'}}</view>
			</view>
			<view class="bottom_jiedan_button" @click="couponTap2(service_data)">
				我想要
			</view>
		</view> -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- 手机号微信查看弹窗 -->
		<view class="popup_user_contact" v-show="is_popup_user_contact" @click="is_popup_user_contact=false">
			<view class="popup_user_contact_c">
				<view class="popup_user_contact_h">
					<view class="popup_user_contact_t">提示</view>
					<view class="popup_user_contact_u">{{popup_user_contact_type == 'phone' ? '电话：' : '微信号：'}}<text>{{popup_user_contact}}</text></view>
				</view>
				<view class="popup_user_contact_b">
					<view class="popup_user_contact_close" @click="is_popup_user_contact=false">取消</view>
					<view class="popup_user_contact_copy" @click="copyUserContact">复制</view>
				</view>
			</view>
		</view>
		<!-- 二维码弹窗end -->
		<view v-if="showVideo" class="video-count">
			<!--#ifndef APP-PLUS-->
			<video id="myVideo" class="videoLink" autoplay loop :vslide-gesture-in-fullscreen="false" :src="play_video_url" @fullscreenchange="fullscreenchange" @fullscreenclick="fullscreenclick"></video>
			<!--#endif-->
			<!--#ifdef APP-PLUS-->
			<video id="myVideo" class="videoLink" autoplay loop
			 :src='play_video_url && (play_video_url.substring(0,4) == "http" || play_video_url.substring(0,5) == "https") ? play_video_url : "http:" + play_video_url'
			></video>
			<!--#endif-->
		</view>
		<!-- 需求分享 -->
		<view class="demand_share_content" v-if="demand_share_popup == 1">
			<view class="demand_share_ceng" @click="demand_share_popup = 0"></view>
			<view class="demand_share_main">
				<view class="font-size36-bold">分享需求</view>
				<view class="font-size36-bold">可获得60%查看佣金</view>
				<button open-type="share" @click="getUserContactInformations({is_community_demand: 1}, 'share')" class="report">分享</button>
			</view>
		</view>
		<!-- 需求分享end -->
		<!-- 购买查看会员次数弹窗 -->
		<paymentData :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun" :payTitle="'查看会员联系方式次数'" :payGroupName="'user_contact_information'" :userCount="0" :unit="'个'" :rechargeType="1"></paymentData>
		<!-- 升级VIP弹窗 -->
		<view class="user_vip_tips" v-if="user_vip_tips">
			<view class="user_vip_back"></view>
			<view class="user_vip_content">
				<view class="user_vip_close" @click="user_vip_tips = false">
					<image src="https://ly.jukee.net/uploads/default/20230803/8d5635ef7c1504bfadbd85f0a04270cc.png" />
				</view>
				<view class="user_vip_icon">
					<image src="https://img.jukee.net/def/3902e202311271626269626.png" />
				</view>
				<view class="user_vip_title font-size32-bold">成为VIP会员</view>
				<view class="user_vip_tit font-size36-bold" style="font-size: 46rpx;">无限添加客户微信<br/>查看所有客户联系方式</view>
				<view class="user_vip_messag">更多权益请在 “我的” 会员中心查看</view>
				<view class="user_vip_btn" @click="goUrl('/pages/annex/vip_paid/index')">确定</view>
			</view>
		</view>
		<view class="back_popup flex-aj-center" @click="wechat_qrcode_img = ''" v-if="wechat_qrcode_img">
			<image :src="wechat_qrcode_img" style="width: 500rpx;border-radius: 20rpx;" mode="widthFix" @click="previewImage(wechat_qrcode_img)">
		</view>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import WaterfallsFlow from '@/components/plantWaterfallsFlow/WaterfallsFlow.vue'
	import { userInfoApi, followAuthorApi, plantDetailApi, graphicStartApi, incCommunityCountStart } from '@/api/community.js';
	import { getUserInfo, getUserContactInformation, userHasReward } from '@/api/user.js';
	import { getListCircle, recommendCommunity } from '@/api/circle.js'
	import { getUserProductList } from "@/api/user_product"
	import { mapGetters } from "vuex";
	import { configMap } from '@/utils';
	import authorize from '@/components/Authorize';
	import paymentData from '@/components/payDataList';
	import service from '@/components/service/index.vue';
	import demand from '@/components/demand/index.vue';
	import circleItem from '@/components/circle_item/index.vue';
	import videoList from '@/components/videoList/index.vue';
	import userProduct from '@/components/userProduct/index.vue';
	import emptyPage from '@/components/emptyPage.vue'
	import { checkPhone } from '@/utils/validate.js';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			authorize,
			WaterfallsFlow,
			paymentData,
			service,
			demand,
			circleItem,
			videoList,
			userProduct,
			emptyPage,
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				statusBarHeight: statusBarHeight, //系统导航条高度
				loadTitle: '加载更多',
				loading: true,
				isShowAuth: false, //是否隐藏授权
				isAuto: false, //没有授权的不会自动授权
				userInfo: {},
				myUserInfo: {},
				tab: 0,
				uid: '',
				popup_user_contact: '',
				is_popup_user_contact: false,
				popup_user_contact_type: '',
				pay_close: false,
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					value: 'wechat',
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					value: 'alipay',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				searchList: [
					{
						name: '需求',
						type: 3,
					},
					{
						name: '服务',
						type: 1,
					},
					{
						name: '圈子',
						type: 5,
					},
					{
						name: '好货',
						type: 6,
					},
					{
						name: '视频',
						type: 2,
					},
				],
				searchType: 3,
				index: 0,
				list: [],
				recommendList: [],
				page: 1,
				limit: 10,
				is_my: 0,
				demand_id: 0,
				demand_data: {}, // 需求详情
				service_data: {}, // 服务详情
				content_height: '150rpx',
				showVideo: false, // 视频弹窗显示
				videoContext: '',
				play_video_url: "", // 视频播放url
				share: {
					title: '的微店，这里有ta的服务、好货、圈子、视频',
					path: '/pages/plantGrass/demand_detail/index',
					imageUrl: '',
				},
				demand_share_popup: 0,
				user_vip_tips: false,
				wechat_qrcode_img: '', // 微信二维码
			}
		},
		created() {},
		computed: configMap({is_community_video_start: 0}, mapGetters(['isLogin', 'viewColor', 'keyColor'])),
		watch: {},
		onLoad: function(options) {
			let that = this;
			if (options.id) {
				incCommunityCountStart(options.id)
			}
			that.demand_id = options.id;
			that.share.path = that.share.path + '?id=' + options.id;
			if (options.is_type) {
				for(let i = 0; i < that.searchList.length; i++) {
					if (options.is_type == that.searchList[i].type) {
						that.searchType = that.searchList[i].type;
						that.index = i;
						if (options.is_type == 1) {
							that.share.path = that.share.path + '&is_type=' + options.is_type;
							this.videoContext = uni.createVideoContext('myVideo', this);
							uni.setNavigationBarTitle({
								title: '服务详情'
							})
						}
					}
				}
			}
			if (that.isLogin) {
				that.plantDetailApi();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
			that.getUserInfo();
		},
		onShow() {},
		onReady() {},
		mounted: function() {},
		methods: {

			previewImage(url) {
				uni.previewImage({
					urls: [url],
					longPressActions :{
						itemList:['保存图片']
					},
				})
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false
				this.plantDetailApi();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权
			authOpen: function() {
				let that = this;
				if (that.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				}
			},
			plantDetailApi() {
				let that = this;
				plantDetailApi(that.demand_id).then(res=>{
					if (that.searchType == 1) {
						that.service_data = res.data;
					} else {
						that.demand_data = res.data;
					}
					that.uid = res.data.uid;
					if (res.data.is_buy == 1) {
						that.content_height = 'fit-content'
					}
					that.getAuthorInfo(that.uid);
					that.getRecommendCommunityList(res.data.label_id)
				}).catch(err=>{
					that.$util.Tips({title: err}, {tab: 3})
				})
			},
			// 切换搜索内容类型
			searchContent(type, index) {
				if(this.searchType == type) return false;
				this.searchType = type;
				this.index = index;
				if(type == 1 && !this.is_my) return false;
				this.loading = true;
				this.page = 1;
				this.list = [];
				this.getList();
			},
			getList: function() {
				let that = this;
				if(!that.loading) return false;
				let data = {
					page: that.page,
					limit: that.limit,
					uid: that.uid,
				}
				if([1,2,3].includes(that.searchType)) {
					// 搜索需求
					data.is_type = that.searchType
					recommendCommunity(data).then(res => {
						if(res.status == 200)
						{
							that.list = that.list.concat(res.data.list)
							that.loading = res.data.list.length >= that.limit;
							that.page++;
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
					
				} else if(that.searchType == 5) {
					// 搜索圈子
					getListCircle(data).then(res => {
						if(res.status == 200)
						{
							that.list = that.list.concat(res.data.list)
							that.loading = res.data.list.length >= that.limit;
							that.page++
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				} else if(that.searchType == 6) {
					// 搜索好货
					data.status = 1;
					data.is_show = 1;
					getUserProductList(data).then(res=>{
						that.list = that.list.concat(res.data.list)
						that.loading = res.data.list.length >= that.limit;
						that.page++
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				}
			},
			getRecommendCommunityList(label_id) {
				let that = this;
				recommendCommunity({page: 1, limit: 6, not_uid: that.uid, is_type: 3,label_id}).then(res => {
					if(res.data.count) {
						that.$set(that, 'recommendList', res.data.list)
					}
				})
			},
			/*获取用户信息*/
			getAuthorInfo(id){
				let that = this;
				userInfoApi(id).then(res => {
					that.share.title = res.data.nickname + that.share.title;
					that.share.imageUrl = res.data.user_top_back || res.data.avatar;
					that.userInfo = res.data
				});
			},
			// 关注作者
			followAuthor: function() {
				if (this.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				} else {
					let status = this.userInfo.is_start ? false : true
					followAuthorApi(this.userInfo.uid,{status: status}).then(res => {
						if (res.status === 200) {
							this.userInfo.is_start = this.userInfo.is_start ? false : true
						}
						this.$util.Tips({
							title: res.message
						});
					});
				}
			},
			/**
			 * 查看会员联系方式
			 * @param {Object} uid
			 * @param {Object} contact_information
			 */
			getUserContactInformations(data, contact_information) {
				if(!this.isLogin) return this.$util.Tips({title:'请先登录'}, {tab: 1, url: '/pages/index/index'})
				let that = this;
				let uid = that.uid;
				// console.log(999, uid, contact_information);
				if(contact_information == 'phone' || contact_information == 'we_chat_account' || contact_information == 'demand'){
					let params = {
						uid: uid, 
						contact_information: contact_information
					}
					if(contact_information == 'demand') {
						params.extends_id = data.community_id
					} 
					getUserContactInformation(params).then(res=>{
						if(contact_information == 'demand') {
							that.demand_data.content = res.message;
							that.content_height = 'fit-content';
							that.demand_data.is_buy = 1;
						} else {
							if(contact_information == 'phone' && checkPhone(res.message)) {
								return uni.makePhoneCall({
									phoneNumber: res.message // 替换为你想拨打的电话号码
								  }).then(() => {
									console.log('拨打电话成功')
								  }).catch((error) => {
									console.log('拨打电话失败', error)
								  })
							} else {
								if (res.data && res.data.is_img == 1) {
									that.wechat_qrcode_img = res.data.data;
								} else {
									that.popup_user_contact = res.message || '暂未设置该联系方式'
									that.popup_user_contact_type = contact_information;
									that.is_popup_user_contact = true;
								}
							}
						}
					}).catch(err=>{
						if(err == '次数不足') {
							that.user_vip_tips = true;
						}
					})
				} else if (contact_information == 'message') {
					if (this.myUserInfo.is_svip > 0) {
						this.goUrl('/pages/chat/customer_list/chat?userId='+this.userInfo.uid)
					} else {
						that.user_vip_tips = true;
					}
				}else if(contact_information == 'share') {
					if (data.is_community_demand == 1) {
						that.share.title = that.demand_data.content;
						that.share.imageUrl = that.demand_data.image[0] || '';
					} else {
						that.share.title = that.userInfo.nickname + '的微店，这里有ta的服务、好货、圈子、视频';
						that.share.imageUrl = that.userInfo.user_top_back || that.userInfo.avatar;
					}
				}else if(contact_information == 'report') {
					that.$util.Tips('/pages/extends/user_report/index?type=3&link_id='+that.uid)
				}
			},
			copyUserContact() {
				let that = this;
				that.is_popup_user_contact = false;
				if(this.popup_user_contact && this.popup_user_contact!='暂未设置该联系方式') {
					uni.setClipboardData({
					  data: that.popup_user_contact,
					  success: function () {
						return that.$util.Tips({title:'复制成功'});
					  }
					})
				}else{
					return this.$util.Tips({title:'复制失败'});
				}
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.myUserInfo = res.data;
					// #ifdef H5 ||APP-PLUS
					that.payMode[2].number = res.data.now_money;
					// #endif
					// #ifndef H5 ||APP-PLUS
					that.payMode[1].number = res.data.now_money;
					// #endif
				});
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose: function() {
				this.pay_close = false;
			},
			//查看地图
			showMaoLocation() {
				let that = this;
				let lat = that.userInfo.lat,
					long = that.userInfo.lng;
				if (!lat || !long)
					return this.$util.Tips({
						title: '该用户暂未设置访问定位！'
					});
				//#ifdef H5
				if (this.$wechat.isWeixin() === true) {
					this.$wechat
						.seeLocation({
							latitude: Number(lat),
							longitude: Number(long),
							name: this.store.mer_name,
							address: this.store.mer_address ? this.store.mer_address : ''
						})
						.then(res => {
							console.log('success');
						});
				} else {
					//#endif
					uni.openLocation({
						latitude: parseFloat(lat),
						longitude: parseFloat(long),
						scale: 8,
						geocode: true,
						name: that.userInfo.nickname,
						address: (that.userInfo.province || '') + (that.userInfo.city || '') + (that.userInfo.district || '') + (that.userInfo.address || ''),
						success: function(res) {
							console.log(res);
						}
					});
					// #ifdef H5
				}
				//#endif
			},
			/*点赞文章*/
			likeToggle(id, type){
				if (this.isLogin === false) {
					this.isAuto = true;
					this.isShowAuth = true
				}else{
					let status = id ? 0 : 1
					graphicStartApi(this.demand_id,{status: status}).then(res => {
						if (type == 1) {
							this.service_data.relevance_id = status == 1;
						} else {
							this.demand_data.relevance_id = status == 1;
						}
					});
				}
			},
			couponTap2(data) {
				let that = this;
				if (this.isLogin === false) {
					return this.$util.Tips({title: '请先登录'}, {
						tab: 1,
						url: '/pages/user/index'
					})
				} else {
					userHasReward({type: 'is_svip'}).then(res=>{
						if(res.data.status == 1) {
							that.$util.Tips(`/pages/chat/customer_list/chat?userId=${data.uid}&communityId=${data.community_id}`)
						} else {
							that.user_vip_tips = true;
						}
					})
					/* uni.navigateTo({
						url: `/pages/chat/customer_list/chat?userId=${data.uid}&communityId=${data.community_id}`
					}); */
				}
			},
			// 服务我想要
			buyServiceUrl() {
				let that = this;
				if (that.service_data.uid == that.$Cache.get('UID')) return that.$util.Tips({title: '不能咨询自己的服务'})
				that.$util.Tips(`/pages/chat/customer_list/chat?userId=${that.service_data.uid}&communityId=${that.service_data.community_id}&type=1`)
			},
			goUrl(url){
				uni.navigateTo({
					url:url
				})
			},
			clickImg(index) {
				let data = this.demand_data.image
				uni.previewImage({
					urls: data, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			/*查看视频*/
			clickVideo(video_url) {
				this.showVideo = true
				this.play_video_url = video_url
				this.videoContext = uni.createVideoContext('myVideo', this);
				this.$nextTick(()=>{
					this.videoContext.play();
					this.videoContext.requestFullScreen({ direction: 0 });
					// this.videoContext.volume(1);
				})
			},
			fullscreenchange(e) {
				if (e.detail.fullScreen) {
					// 进入全屏后的操作
				  } else {
					// 退出全屏后的操作
					this.showVideo = false;
				  }
			},
			// 后退
			returns: function() {
				uni.navigateBack()
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
		},
		onReachBottom() {
			this.getList();
		},
		onPullDownRefresh(){},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		//分享给朋友
		onShareAppMessage(res) {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// ((that.service_check == 0 && userInfo.user_service) ? that.userInfo.user_service.content : that.userInfo.service) || that.userInfo.nickname+'的微店，这里有ta的服务、好货、圈子、视频'
			return {
				title: this.share.title,
				path: this.share.path,
				imageUrl: this.share.imageUrl,
				success(res) {
					console.log(res)
				},
				fail(res) {
					console.log(res)
				}
			}
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.share.title,
				query: {
					spid: that.$Cache.get('UID')
				},
				imageUrl: that.share.imageUrl,
			};
		},
	}
</script>

<style lang="scss" scoped>
.container{
	// background: #ffffff;
	min-height: 100vh;
	padding-bottom: 120rpx;
}
.header{
	width: 750rpx;
	// height: 330rpx;
	padding: 30rpx 50rpx 100rpx;
	// background-color: #FFE103;
	background-size: 100%;
	margin-bottom: -100rpx;
	.user_wrapper{
		align-items: center;
		.image,uni-image,image{
			width: 124rpx;
			height: 124rpx;
			border-radius: 100%;
			border: 4rpx solid #ffffff;
		}
		.user_text{
			margin-left: 34rpx;
			color: #323232;
			.name{
				font-size: 34rpx;
				font-weight: bold;
				align-items: center;
			}
			.user_id{
				margin-top: 18rpx;
				font-size: 28rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				.user_fensi_icon {
					width: 28rpx;
					image {
						width: 28rpx;
						height: 28rpx;
						border: 0;
						border-radius: 0;
					}
				}
				.user_fensi {
					font-size: 24rpx;
					font-weight: 400;
					color: #323232;
					line-height: 34rpx;
					margin-left: 8rpx;
				}
				.user_label {
					border-radius: 23rpx;
					border: 1rpx solid #323232;
					font-size: 20rpx;
					font-weight: 400;
					color: #323232;
					line-height: 28rpx;
					padding: 4rpx 12rpx;
					margin-left: 20rpx;
				}
			}
			.level_icon{
				width: 34rpx;
				height: 32rpx;
				margin: 4rpx 0 0 6rpx;
				border: none;
			}
		}
	}
	
	.follow_btn{
		color: #ffffff;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 146rpx;
		height: 62rpx;
		background-color: transparent;
		background-image: linear-gradient(270deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		border-radius: 33rpx;
		.iconfont{
			font-size: 16rpx;
			margin-right: 12rpx;
		}
		.icon-fabu{
			font-size: 24rpx;
		}
		&.focused{
			background: transparent;
			color: #FFFFFF;
			border: 1px solid #FFFFFF;
		}
	}
}
.plant_info{
	// margin-top: 34rpx;
	margin: 30rpx 50rpx 0;
	align-items: center;
	justify-content: space-between;
	box-shadow: 4rpx 4rpx 50rpx 0rpx rgba(125,124,116,0.1);
	border-radius: 12rpx;
	background-color: #fff;
	padding: 20rpx 30rpx;
	.count_wrapper{
		color: #FFFFFF;
		font-size: 24rpx;
		width: 100%;
		justify-content: space-between;
		.item{
			background-color: #FFE103;
			border-radius: 50%;
			text-align: center;
			display: flex;
			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin: 5rpx
			}
		}
	}
	.intended-customers {
		margin-top: 40rpx;
		width: 100%;
		.intended-customers-title {
			font-size: 30rpx;
			font-weight: 500;
			color: #323232;
			line-height: 42rpx;
		}
		.intended-customers-user {
			display: flex;
			flex-wrap: nowrap;
			padding: 20rpx 0;
			align-items: center;
			width: 100%;
			.intended-customers-avatar {
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				grid-gap: 12rpx;
				margin-right: 20rpx;
				image {
					width: 54rpx;
					height: 54rpx;
					display: table;
					border-radius: 50%;
				}
			}
			.intended-customers-more {
				width: 10rpx;
				height: 22rpx;
				margin-left: auto;
				image {
					width: 10rpx;
					height: 22rpx;
					display: block;
				}
			}
		}
	}
	.business {
		margin-top: 30rpx;
	}
	.user-address {
		display: flex;
		flex-wrap: nowrap;
		overflow-y: auto;
		align-items: center;
		width: 100%;
		margin-top: 20rpx;
		.user-address-detail {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #323232;
			line-height: 40rpx;
			flex: 1;
			overflow-x: auto;
			white-space: nowrap;
			margin-right: 12rpx;
			image {
				width: 24rpx;
				height: 28rpx;
				display: inline-table;
				margin-right: 12rpx;
			}
		}
		.user-address-btn{
			background: #FFE103;
			border-radius: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #1C211D;
			line-height: 40rpx;
			padding: 12rpx 30rpx;
			margin-left: auto;
		}
	}
}
.tabNav {
	padding: 20rpx 0 40rpx;
	display: flex;
	background-color: #fff;
	margin: 20rpx 0;
	.tabNav-item {
		flex: 1;
		text-align: center;
		.tabNav-item-name {
			font-size: 34rpx;
			font-weight: 500;
			color: #323232;
			line-height: 48rpx;
			position: relative;
		}
		.on {
			font-size: 38rpx;
			font-weight: 500;
			color: #323232;
			line-height: 52rpx;
			&::after{
				content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: -20rpx;
			}
		}
	}
}
.common-content-margin {
	// padding: 40rpx 30rpx 0;
	// background-color: #fff;
}
.common-head {
	display: flex;
	flex-wrap: initial;
	align-items: center;
	.common-title {
		margin-right: auto;
		position: relative;
		&:before {
			content: "";
			display: inline-block;
			width: 100%;
			height: 20rpx;
			background-color: #FFE103;
			position: absolute;
			bottom: 0rpx;
		}
		.common-title-name {
			font-size: 40rpx;
			font-weight: 500;
			color: #2C2C2C;
			line-height: 56rpx;
			position: relative;
		}
	}
	.common-children-t {
		display: flex;
		align-items: center;
		.common-children-title {
			font-size: 32rpx;
			font-weight: 400;
			color: #1C211D;
			line-height: 44rpx;
			margin-right: 50rpx;
		}
		.common-children-title-on {
			font-weight: 500;
		}
	}
	.common-head-more {
		width: 20rpx;
		height: 32rpx;
		image {
			width: 20rpx;
			height: 32rpx;
		}
	}
}
.search-list-content {
	padding: 0 30rpx;
}
.search-list-data {
	margin-top: 30rpx;
}
.demand_detail {
	border-radius: 12rpx;
	.demand_info {
		background-color: #fff;
		padding: 30rpx;
		.demand_content {
			font-size: 34rpx;
			font-weight: 500;
			color: #323232;
			line-height: 51rpx;
			// max-height: 134rpx;
			overflow-y: hidden;
			.demand_label {
				background-color: #FFC200;
				color: #fff;
				padding: 8rpx 10rpx;
				font-size: 26rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          left: -16rpx;
          top: -16rpx;
          width: 16px;
          height: 16px;
          background-image: url('https://ly.jukee.net/static/homeimg_zheng.png');
          background-size:cover;
          background-repeat: no-repeat;
          background-position: center;
        }
			}
		}
		.demand_pics {
			display: grid;
			grid-gap: 10rpx;
			grid-template-columns: 1fr 1fr 1fr;
			image {
				display: block;
				width: auto;
				border-radius: 10rpx;
			}
		}
		.demand_price {
			margin-top: 16rpx;
			font-size: 28rpx;
			font-weight: normal;
			color: #FE4504;
			line-height: 56rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.demand_p{
				font-size: 28rpx;
				font-weight: normal;
				color: #FE4504;
				line-height: 56rpx;
			}
			.demand_tips {
				font-size: 24rpx;
				font-weight: 400;
				color: #767676;
				line-height: 34rpx;
				margin-left: 10rpx;
			}
			.demnad_more {
				margin-left: auto;
				background: #FFE103;
				border-radius: 30rpx;
				font-size: 28rpx;
				color: #1C211D;
				text-align: center;
				padding: 2rpx 20rpx;
				font-weight: bold;
			}
			.report {
				display: flex;
				align-items: center;
				margin-left: 50rpx;
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
	.demand_c_title {
		margin: 40rpx 0 20rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #2C2C2C;
		line-height: 50rpx;
	}
	.demand_c {
		font-size: 28rpx;
		font-weight: 400;
		color: #323232;
		line-height: 42rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
	}
}
.community_content {
	margin: 30rpx;
	padding: 30rpx;
	box-sizing: border-box;
	background-color: #fff;
	.community_head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		.community_price {
			color: #F0480F;
			text {
				font-size: 26rpx;
			}
		}
		.community_hits {
			color: #999999;
		}
	}
	.community_data {
		font-size: 34rpx;
		font-weight: 500;
		color: #323232;
		line-height: 51rpx;
		.community_video {
			width: 100%;
			height: 320rpx;
			border-radius: 15rpx; 
			padding-top: 120rpx;
			margin-top: 20rpx;
			.community_video_play {
				display: block;
				margin: 0 auto;
				width: 88rpx;
				height: 88rpx;
			}
		}
		.community_pics {
			margin-top: 20rpx;
			image {
				width: 100%;
			}
		}
	}
}
.recommend-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #2C2C2C;
	line-height: 50rpx;
	margin-top: 40rpx;
}
.servie-introduce {
	background: #FFFFFF;
	box-shadow: 4rpx 4rpx 50rpx 0rpx rgba(125,124,116,0.1);
	border-radius: 12rpx;
	padding: 40rpx 30rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #323232;
	line-height: 42rpx;
	margin-top: 20rpx;
}
.servie-label {
	background: #FFF9CD;
	border-radius: 32rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #323232;
	line-height: 40rpx;
	padding: 12rpx 30rpx;
	margin-top: 30rpx;
	width: fit-content;
	margin-bottom: 20rpx;
}
.head-wrapper {
		z-index: 999;
		display: flex;
		align-items: center;
		position: fixed;
		left: 30rpx;
		top: 0;
		/* #ifdef MP */
		height: 43px;
		/* #endif */
		/* #ifdef H5 */
		height: 114rpx;
		/* #endif */
	}
	.head-menu {
		display: flex;
		align-items: center;
		height: 54rpx;
		width: 140rpx;
		background: rgba(0, 0, 0, .25);
		border-radius: 27rpx;
		.iconfont {
			flex: 1;
			text-align: center;
			color: #fff;
			box-sizing: border-box;
			&.icon-xiangzuo {
				border-right: 1px solid #fff;
			}
		}
	}
	.head-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 36rpx;
		margin-left: 120rpx;
		white-space: nowrap;
	}
	
.popup_user_contact {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	.popup_user_contact_c { 
		width: 480rpx;
		margin: 20vh auto;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		.popup_user_contact_h {
			padding: 30rpx 30rpx 80rpx;
			border-bottom: 1rpx solid #DDDDDD;
			.popup_user_contact_t {
				font-size: 34rpx;
				font-weight: 400;
				color: #2C332D;
				line-height: 48rpx;
			}
			.popup_user_contact_u{
				font-size: 28rpx;
				font-weight: 500;
				color: #323232;
				line-height: 40rpx;
				margin-top: 32rpx;
				text {
					color: #F73D3B;
				}
			}
		}
		.popup_user_contact_b {
			padding: 20rpx 0;
			text-align: center;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			.popup_user_contact_close {
				font-size: 28rpx;
				font-weight: 400;
				color: #666764;
				line-height: 40rpx;
				flex: 1;
			}
			.popup_user_contact_copy {
				font-size: 28rpx;
				font-weight: 400;
				color: #323232;
				line-height: 40rpx;
				border-left: 1rpx solid #DDDDDD;
				flex: 1;
			}
		}
	}
}
.bottom_jiedan {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: 16rpx 30rpx 20rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	.bottom_jiedan_check {
		text-align: center;
		margin-right: 20rpx;
		.bottom_jiedan_name {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 20rpx;
		}
	}
	.bottom_jiedan_button {
		// flex: 1;
		background: #FFE103;
		border-radius: 41rpx;
		padding: 20rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #1C211D;
		line-height: 42rpx;
		margin-left: auto;
		// width: fit-content;
		.bottom_jiedan_wz {
			margin-left: 10rpx;
		}
	}
	.bottom_jiedan_icon {
		width: 46rpx;
		height: 46rpx;
		image {
			width: 46rpx;
			height: 46rpx;
		}
	}
}
// 分享需求
.demand_share_content {
	position: fixed;
	// background-color: rgba(0,0,0);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	.demand_share_ceng {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
	}
	.demand_share_main {
		position: relative;
		background-color: #fff;
		margin: 70% 86rpx 0;
		border-radius: 30rpx;
		// border: 1px solid #000;
		padding: 30rpx;
		text-align: center;
		font-size: 36rpx;
		line-height: 70rpx;
		.report {
			font-weight: bold;
			background-color: #FDE515;
			display: inline-block;
			padding: 10rpx 50rpx;
			border-radius: 10rpx;
			margin-top: 30rpx;
			font-size: 42rpx;
		}
	}
}
// 升级VIP弹窗
.user_vip_back {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
.user_vip_content {
	background-color: #fff;
	position: fixed;
	top: 30%;
	left: 50rpx;
	right: 50rpx;
	// margin: 50% 50rpx 0;
	border-radius: 30rpx;
	padding: 30rpx;
	text-align: center;
	.user_vip_close {
		position: absolute;
		right: 30rpx;
		top: 50rpx;
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.user_vip_icon {
		margin: 0 auto;
		image {
			width: 140rpx;
			height: 130rpx;
			margin: 0 auto;
			display: block;
		}
	}
	.user_vip_tit  {
		margin-top: 20rpx;
	}
	.user_vip_messag {
		font-size: 32rpx;
		margin-top: 30rpx;
	}
	.user_vip_btn {
		font-weight: bold;
		background-color: #FDE515;
		display: inline-block;
		padding: 10rpx 50rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		font-size: 42rpx;
	}
}

.circle_demand_hist {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: 400;
  color: #2F2F2F;
  position: relative;
  left: -16rpx;
  image {
    width: 42rpx;
    height: 32rpx;
    margin-left: 32rpx;
    margin-right: 12rpx;
  }
}
.circle_demand_service_t {
  width: 63rpx;
  height: 63rpx;
  margin-right: 58rpx;
  image {
    width: 63rpx;
    height: 63rpx;
  }
}
.demand_detail.searchType3Detail .demand_info .demand_price .demnad_more {
  width:auto;
  margin-left: 0;
}
.demand_detail.searchType3Detail .demand_info .demand_price{
  justify-content: space-between;
}
.demand_detail.searchType3Detail .demand_info .demand_content {
    line-height: 48rpx;
    padding-left: 16rpx;
    padding-top: 16rpx;
}
.demand_detail.searchType3Detail .circle_demand_service_t {
  margin-right:0;
}
.circle_demand_title_time{
  text-align: right;
  font-size: 18rpx;
  display: block;
  margin-left: auto;
  position: relative;
  background: #fff;
  padding: 40rpx 20rpx;
  &::after{
    width:65%;
    height: 2rpx;
    background: #E5E5E5;
    position: absolute;
    top: 50%;
    left: 0;
    content: '';
    transform: translateY(-50%);
    
  }
}
</style>
